<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>deferred 的使用</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
  <h1>deferred 的使用</h1>
  <script>
    // var waitHandle = function() {
    //   var dtd = $.Deferred()

    //   var wait = function(dtd) {
    //     var task = function() {
    //       var status = 200
    //       if(status === 200) {
    //         dtd.resolve()
    //       } else {
    //         dtd.reject()
    //       }
    //     }
    //     setTimeout(task, 1000);
    //     return dtd   // 直接 return dtd 对象 , 我们返回的实例会拥有 reject resovle done fail 这些主动放方法  不安全
    //   }
    //   return wait(dtd)
    // }

    // var w = waitHandle()
    // w.then(function() {
    //   console.log('成功 1')
    // }, function() {
    //   console.log('失败 1')
    // })
    // w.then(function() {
    //   console.log('成功 2')
    // }, function() {
    //   console.log('失败 2')
    // })
    // w.then(function() {
    //   console.log('成功 3')
    // }, function() {
    //   console.log('失败 3')
    // })

    var waitHandle = function() {
      var dtd = $.Deferred()
      var wait = function() {
        var task = function() {
          var status = 200
          if(status === 20) {
            dtd.resolve()
          } else {
            dtd.reject()
          }
        }
        setTimeout(task, 1000)
        return dtd.promise()
      }
      return wait(dtd)
    }
    var w = waitHandle()
    $.when(w).then(function() {
      console.log('ok 1')
    }, function(err) {
      console.log('err 1')
    })
    $.when(w).then(function() {
      console.log('ok 2')
    }, function() {
      console.log('err 2')
    })
    $.when(w).then(function() {
      console.log('ok 3')
    }, function() {
      console.log('err 3')
    })
  </script>
</body>
</html>